<template>
  <svg id="flowDesignCenter">
    <defs>
      <marker
        id="idArrow"
        viewBox="0 0 20 20"
        refX="58"
        refY="10"
        markerUnits="strokeWidth"
        markerWidth="5"
        markerHeight="15"
        orient="auto"
      >
        <path d="M 0 0 L 20 10 L 0 20 z" />
      </marker>
    </defs>
    <path
      class="line"
      marker-end="url(#idArrow)"
      :d="`M${line.startNode.x},${line.startNode.y}L${line.endNode.x},${line.endNode.y}`"
      :key="index"
      v-for="(line,index) in lines"
    />
    <node :data="node" :index="index" :key="'id_'+node.id" v-for="(node,index) in nodes" />
  </svg>
</template>
<script>
import node from "./node";
export default {
  //todo: draggable="true" ondragstart="drag(event)"  包括表单那边也换掉
  components: {
    node
  },
  data() {
    return {
      nodes: [
        {
          id: 0,
          x: 200,
          y: 300,
          title: "开始节点",
          code: "start",
          color: "#389e0d"
        },
        {
          id: Date.now(),
          x: 600,
          y: 300,
          title: "结束节点",
          code: "end",
          color: "#1890ff"
        }
      ],
      lines: [],
      lineDrawing: false
    };
  },
  mounted() {
    this.rect = document
      .querySelector("#flowDesignCenter")
      .getBoundingClientRect();
    this.nodes[1].x = this.rect.right - this.rect.left - 200;
    this.watchMouseEvent();
  },
  methods: {
    mouseUp(x, y) {
      this.nodes.push({
        id: Date.now(),
        x,
        y,
        code: this.$root.flow.curField.code,
        title: this.$root.flow.curField.title,
        color: "#1890ff"
      });
      this.$root.flow.curField = null;
    },
    watchMouseEvent() {
      let parentDom = document.querySelector("#flowDesign");
      let svgDom = document.querySelector("#flowDesignCenter");
      parentDom.addEventListener("mouseup", e => {
        if (!this.$root.flow.curField) return;
        let xIn = e.clientX >= this.rect.left && e.clientX <= this.rect.right;
        let yIn = e.clientY >= this.rect.top && e.clientY <= this.rect.bottom;
        if (xIn && yIn)
          this.mouseUp(e.clientX - this.rect.left, e.clientY - this.rect.top);
      });
      svgDom.addEventListener("mousemove", e => {
        if (!this.lineDrawing) return;
        this.lines[0].endNode = {
          x: e.clientX - this.rect.left,
          y: e.clientY - this.rect.top
        };
      });
      svgDom.addEventListener("mousedown", e => {
        if (!this.lineDrawing) return;
        this.lines.splice(0, 1);
        this.lineDrawing = false;
      });
    },
    drawLine(index, x, y) {
      if (!this.lineDrawing) {
        this.lineDrawing = true;
        this.lines.unshift({
          startNode: this.nodes[index],
          endNode: { x, y }
        });
      } else {
        if (this.nodes[index].id == this.lines[0].startNode.id) return;
        this.lines[0].endNode = this.nodes[index];
        this.lineDrawing = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#flowDesignCenter {
  flex: 1;
  .line {
    stroke: #1890ff;
    stroke-width: 2;
  }
}
</style>